<template>
    <div class="box">
        <header>
            <van-nav-bar :title="name == 'add' ? '新增地址' : '编辑地址'" left-text="返回" left-arrow
                @click-left="$router.back()" />
        </header>
        <div class="content">
            <van-address-edit :address-info="detailInfo" :area-list="areaList" show-delete show-set-default
                :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete" />
        </div>
    </div>
</template>
<script>
import { showToast } from 'vant';
import { areaList } from '@vant/area-data';
import { mapMutations } from 'vuex';

export default {
    props: {
        name: {
            type: String,
            default: ''
        },
        detailInfo: {
            type: Object,
            default: () => { }
        },
        // name:String,
    },
    data() {
        return {
            // areaList:areaList
            areaList,
        }
    },
    methods: {
        ...mapMutations(['addAddress', 'editAddress']),
        onSave(info) {
            console.log(info, 'info')
            // showToast('save')
            // this.addAddress({
            //     id: '3',
            //     name: info.name,
            //     tel: info.tel,
            //     address: info.province + info.city + info.county + info.addressDetail,
            // })
            const params = {
                ...info,
                address: info.province + info.city + info.county + info.addressDetail
            }
            this.name == 'add' ? this.addAddress(params) : this.editAddress(params)
            this.$router.back()
        },
        onDelete() { showToast('delete') },
    }
}

</script>